import React from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  InputRightAddon,
  FormHelperText,
  FormLabel,
  Button,
  FormControl,
  useToast,
} from "@chakra-ui/core";
import { Field, Form, Formik } from "formik";
import { FaUserAlt, FaLock, FaCheck, FaVoicemail } from "react-icons/fa";
import request from "../request";

export default function SignUp() {
  const toast = useToast();
  function validate(value) {
    let error;
    if (!value) {
      error = "此项为必填项";
    }
    return error;
  }
  return (
    <Formik
      initialValues={{}}
      onSubmit={async (values) => {
        try {
          await request('', { user: values });
          toast({
            position: "top",
            title: "Account created.",
            status: "success",
          });
        } catch (error) {
          toast({
            position: "top",
            title: "Account not created .",
            description: JSON.stringify(error),
            status: "error",
          });
        }
      }}
    >
      {(props) => (
        <Form>
          <Stack spacing="2">
            <Field name="username" validate={validate}>
              {({ field, form }) => (
                <FormControl isInvalid={form.errors.username && form.touched.username}>
                  <InputGroup>
                    <InputLeftAddon children={<FaUserAlt />} />
                    <Input {...field} placeholder="请输入昵称" />
                  </InputGroup>
                  {form.touched.username && <FormHelperText>{form.errors.username}</FormHelperText>}
                </FormControl>
              )}
            </Field>
            <Field name="email" validate={validate}>
              {({ field, form }) => (
                <FormControl isInvalid={form.errors.email && form.touched.email}>
                  <InputGroup>
                    <InputLeftAddon children={<FaVoicemail />} />
                    <Input {...field} placeholder="请输入邮箱或手机号" />
                  </InputGroup>
                  {form.touched.email && <FormHelperText>{form.errors.email}</FormHelperText>}
                </FormControl>
              )}
            </Field>
            <Field name="password" validate={validate}>
              {({ field, form }) => (
                <FormControl isInvalid={form.errors.password && form.touched.password}>
                  <InputGroup>
                    <InputLeftAddon children={<FaLock />} />
                    <Input
                      {...field}
                      type="password"
                      placeholder="请输入密码"
                    />
                    <InputRightAddon children={<FaCheck />} />
                  </InputGroup>
                  {form.touched.password && <FormHelperText>{form.errors.password}</FormHelperText>}
                </FormControl>
              )}
            </Field>
            <FormLabel htmlFor="deal">
              点击 “注册” 即表示您同意并愿意遵守简书 用户协议 和 隐私政策 。
            </FormLabel>
            <Button
              _hover={{ bgColor: "tomato" }}
              w="100%"
              colorScheme="teal"
              type="submit"
            >
              注册
            </Button>
          </Stack>
        </Form>
      )}
    </Formik>
  );
}
